<template>
  <!-- 导航栏 -->
  <div class="h-16 flex justify-between bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
    <div class="logo">
      <a href="#" class="flex">
        <img src="@/assets/icons/TroveBox.svg" alt="logo" class="w-10 h-8" />
        <span className="self-center text-lg font-semibold whitespace-nowrap dark:text-white"> Trove Box </span>
      </a>
    </div>
    <div class="menu"></div>
  </div>
  <!-- <el-alert
    title="请输入完整题目(可带/不带答案)，请勿输入无效题目，比如‘1’,'你是谁'等问题"
    :center="true"
    type="error" /> -->
  <!-- 内容 -->
  <div class="h-center md:my-5 mx-4 md:w-4/5 md:mx-auto rounded-3xl border bg-white p-4 md:p-8 shadow-xl dark:bg-black">
    <div class="flex">
      <el-input v-model="question" placeholder="请输入您要搜索的题目。。。" clearable size="small" @clear="handleClear">
        <template #prefix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-input>
      <button
        @click="handleSearch"
        class="w-16 text-xs md:w-20 md:text-sm py-2.5 px-3 ml-2 font-medium text-center text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        搜索
      </button>
      <button
        @click="handleClear"
        class="w-16 text-xs hidden md:block md:w-20 md:text-sm py-2.5 px-3 ml-2 font-medium text-center text-white backdrop-opacity-50 bg-red-500 rounded-lg border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
        清空
      </button>
    </div>
    <div class="h-p9 overflow-auto my-3">
      <!-- 为空时展示 -->
      <div v-if="isNoAnswer" class="text-sm text-center text-red-500 font-semibold">暂时没有搜索到</div>
      <div v-if="TList && TList?.length > 0" class="text-sm text-center text-red-500 font-semibold">
        以下答案来自第三方,遇到错误请及时反馈
      </div>
      <!-- T答案列表(第三方) -->
      <div v-for="(answer, index) in TList" :key="answer.id" className="flex flex-col m-4">
        <div class="flex text-sm text-amber-600 font-semibold">
          <span class="w-auto">题目{{ index + 1 }}：</span>
          <div>{{ answer.questionText }}</div>
        </div>
        <div class="flex text-sm w-full flex-col">
          <div class="flex items-center">
            <span class="w-12 font-semibold">答案：</span>
            <el-tooltip class="box-item" effect="dark" content="答案有错误?点击上报!!!" placement="right">
              <svg-icon icon-class="FeedBack" size="1.25rem" />
            </el-tooltip>
          </div>
          <div v-for="(item, indexx) in answer.answerText" :key="indexx">
            {{ item }}
          </div>
        </div>
      </div>
      <el-divider v-if="EList && EList?.length > 0" />
      <div v-if="EList && EList?.length > 0" class="text-sm text-center text-red-500 font-semibold">
        以下答案来自本系统,遇到错误请及时反馈
      </div>
      <!-- E答案列表(自己) -->
      <div v-for="(answer, index) in EList" :key="answer.id" className="flex flex-col m-4">
        <div class="flex text-sm text-amber-600 font-semibold">
          <span class="w-auto">题目{{ index + 1 }}：</span>
          <div>{{ answer.questionText }}</div>
        </div>
        <div class="flex text-sm w-full flex-col">
          <div class="flex items-center">
            <span class="w-12 font-semibold">答案：</span>
            <el-tooltip class="box-item" effect="dark" content="答案有错误?点击上报!!!" placement="right">
              <svg-icon icon-class="FeedBack" size="1.25rem" />
            </el-tooltip>
          </div>
          <div v-for="(item, indexx) in answer.answerText" :key="indexx">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import type { AnswerListParamsType, AnswerType } from '@/server/question/interface'
import { getAnswerListApi } from '@/server/question'
import { ResultEnum } from '@/enums/httpEnum'

const isNoAnswer = computed(() => TList.value?.length === 0 && EList.value?.length === 0)

const question = ref<string>('')
const loading = ref<boolean>(false)
const TList = ref<AnswerType[]>()
const EList = ref<AnswerType[]>()
const handleSearch = async () => {
  const params: AnswerListParamsType = {
    // 问题内容
    condition: {
      questionText: question.value,
      status: 0,
      state: 0
    },
    // 页码
    pageNo: 1,
    // 每页数量
    pageSize: 3
  }
  loading.value = true
  const res = await getAnswerListApi(params)
  loading.value = false
  if (res.code === ResultEnum.SUCCESS) {
    const {
      data: { data }
    } = res
    const { T, E } = data
    TList.value = T
    EList.value = E
  }
}

const handleClear = () => {
  question.value = ''
  TList.value = []
  EList.value = []
}

onMounted(() => {
  ElNotification({
    title: '提示',
    message: '请输入完整题目(可带/不带答案)，请勿输入无效题目，比如"1"、"你是谁"...等问题',
    type: 'warning'
  })
})
</script>
<style scoped>
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}
</style>
